<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
    <meta name="format-detection" content="telephone=no" />
    <title>我的订单</title>
    <meta content="" name="keywords" />
    <meta content="" name="description" />
    <meta content="" name="copyright" />
    <meta content="" name="author" />
    <meta name="robots" content="noarchive">
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script type="text/javascript" src="js/urlTool.js"></script>
    <script type="text/javascript" src="js/mescroll.min.js"></script>
    <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
    <link rel="stylesheet" href="css/public.css" />
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/mescroll.min.css">
    <link rel="stylesheet" href="css/swiper.min.css" />
    <style>
        /* 本例子css */
		.slideTxtBox{text-align:left;}
		.slideTxtBox .hd{height:38px; line-height:38px; background:#f4f4f4;border-bottom:1px solid #ddd;}
		.slideTxtBox .hd ul{float:left;height:38px;}
		.slideTxtBox .hd ul li{float:left;padding:0 10px;cursor:pointer;}
		.slideTxtBox .hd ul li.on{height:38px;background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }
		.slideTxtBox .bd div{zoom:1;}
    </style>
</head>

<body class="bgf8">
    <div id="mescroll" class="mescroll pb120">
        <!--头部-->
        <div class="return_top bgyellow">
            <a href="index.html">
                <span class="login_home cfff">首页</span>
            </a>
        </div>
        <!--//头部结束-->
        <div class="slideTxtBox">
			<div class="hd">
				<ul>
                    <li id="all" orderStatus="" orderIsUse="" class="on">全部</li>
                    <li id="unpaid" orderStatus="0" orderIsUse="" >未付款</li>
                    <li id="paid" orderStatus="1" orderIsUse="" >已付款</li>
                    <li id="colse" orderStatus="-1" orderIsUse="" >关闭交易</li>
                    <li id="notused" orderStatus="" orderIsUse="0" >未使用</li>
                    <li id="used" orderStatus="" orderIsUse="1" >已使用</li>
                </ul>
			</div>
        </div>
        <!-- 有订单开始 -->
        <div id="recordInfo"></div>
        <!--有订单结束 -->
    </div>
    <!--底部-->
    <div class="footerpage"></div>
    <!--//底部-->
</body>
<script id="tpl_no" type="text/html">
    <div class="bgfff h90 pt150">
        <div class="myorder tc c666"><img src="temp/noorder.png">
            <p class="mt70">暂无信息</p>
        </div>
    </div>
</script>
<script>
    $(".footerpage").load("footer.html", '', function () {
        $('#order').addClass("select-two").children().attr("class", "orderclick");
    });
    var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id (1.3.5版本支持传入dom对象)
        //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
        //解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
        down: {
            //callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
        },
        up: {
            auto: true,//是否在初始化完毕之后自动执行一次上拉加载的回调
            callback: upCallback, //上拉加载的回调
            //以下是一些常用的配置,当然不写也可以的.
            page: {
                num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                size: 10 //每页数据条数,默认10
            },
            htmlNodata: '<p class="upwarp-nodata">-- 到底啦 --</p>',
            noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
            //避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
            //这就是为什么无更多数据有时候不显示的原因.
            clearId: 'recordInfo',//加载第一页时需清空数据的列表id
            empty: {
                //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
                warpId: "recordInfo", //父布局的id (1.3.5版本支持传入dom元素)
                tip: $("#tpl_no").html() //提示
            }
        }
    });

    //上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
    var sign = $(".on").attr('id');
    function upCallback(page) {
        var orderStatus = $(".on").attr('orderStatus');
        var orderIsUse = $(".on").attr('orderIsUse');
        var sign_now = $(".on").attr('id');
        sm.req({
            url: '/Member/MyOrderList'
            ,data: {'page':page.num,'limit':page.size,'orderStatus':orderStatus,'orderIsUse':orderIsUse}
            , done: function (res) {
                var nolist = '';
                var _str = '';
                var _orderType = ['商品订单', '车主卡订单'];
                var totalSize = res.count; // 接口返回的总数据量(比如列表有26个数据,每页10条,共3页; 则totalSize值为26)
                //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
                //必传参数(当前页的数据个数, 总数据量)
                mescroll.endBySize(res.data.length, totalSize);
                //设置列表数据
                if (res.data == "") {
                    //没有记录
                    nolist = '<div class="bgfff h90 pt150">'
                        + '<div class="myorder tc c666">'
                        + '<img src="temp/noorder.png">'
                        + '<p class="mt70">您还没有订单</p>'
                        + '</div>'
                        + '</div>';
                    $('#recordInfo').html(nolist);
                }else {
                    for (var i = 0; i < res['data'].length; i++) {
                        if(res['data'][i]['orderType'] == '0'){
                            img_attPath = res['data'][i]['proPicList'].length==0?'temp\/noimg.png':fileUrl+res['data'][i]['proPicList'][0]['attPath'];
                        }else{
                            img_attPath = 'temp\/cardcolorbg.png';
                        }
                        _str += '<div class="bgfff mb20">'
                            + '<div class="ordercar_list bb c333">'
                            + '<p class="ordercar_list_title">时间：' + res['data'][i]['addTime'] + '</p>'
                            + '<p class="ordercar_list_data tr cblue">' + (res['data'][i]['orderStatus'] == '0' ? '未付款' : (res['data'][i]['orderStatus'] == '1' ? '已经付款' : '关闭交易')) + '</p>'
                            + '</div>'
                            + '<div class="ordercar_list bb"><a href="ordercarinfo.html?orderNo=' + res.data[i].orderNo + '" class="ordercar_list_a">'
                            + '<img src="'+img_attPath+'" class="ordercar_list_img" onerror="imgerrorfun();">'
                            + '<div class="ordercar_list_data pl20 t-ell">'
                            + '<p class="fz28 c333 t-ell">' + res['data'][i]['proName'] + '</p>'
                            + '<p class="c999 pt20">价格：' + ((res['data'][i]['orderPrice']) * 0.01).toFixed(2) + '元</p>'
                            + '<p class="c999">' + (res['data'][i]['orderType'] == '0' ? '商品订单' : '车主卡订单') + '</p>'
                            + '<p class="c999">' + res['data'][i]['orderNo'] + '</p>'
                            + '</div>'
                            + '</div></a>'
                            + '</div>';
                    }
                    if(sign+'='+sign_now){
                        $("#recordInfo").append(_str);
                    }else{
                        $("#recordInfo").html(_str);
                    }
                }
                sign = sign_now;
            },
            error: function (e) {
                //联网失败的回调,隐藏下拉刷新和上拉加载的状态
                mescroll.endErr();
            }
        })
    }

                            
$(".slideTxtBox li").click(function () {
    var page={'num':1,'size':10};
    $(this).addClass("on").siblings().removeClass("on");
    upCallback(page);
});
function imgerrorfun(){ 
    var img=event.srcElement; 
    img.src="temp/noimg.png"; 
    img.onerror=null;
}
$(".slideTxtBox").slide();
</script>

</html>